<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .banner-box{
        width: 600px;
        height: auto;
        overflow: hidden;
        position: relative;
    }
    .bannerImg{
        width: 24.8%;
        height: auto;
        margin: 0;
    }
    .banner{
        width: 400%;
        height: 100%;
        margin: 0;
        position: relative;
        left: 0;
    }
    .silder{
        position: absolute;
        top: 45%;
        width: 50px;
        height: 50px;
        display: flex;
        justify-content: center;
        justify-items: center;
        color:white;
        cursor: pointer;
    }
    .pre{
        left: 0;
    }
    .next{
        right: 0;
    }
    .bot-list{
        width: 85px;
        height: 15px;
        position: absolute;
        bottom: 15px;
        left: 45%;
    }
    .bot{
        height: 13px;
        width: 13px;
        border-radius: 50%;
        background-color: white;
        float: left;
        margin-left: 5px;
    }
    .active{
        background-color: black;
        border:1px solid white
    }
</style>
<style>
    .todolist-box{
        width: 500px;
        height: 300px;
        background-color: skyblue;
        overflow: auto;
    }
    .inputtext{
        width: 80%;
        background-color: rgb(eee, eee, eee);
        height: 20px;;
    }
    form>button{
        height: 25px;
    }
    .list{
        border: 1px solid rgb(555, 555, 555);
        margin: 5px;
        background-color: #eee;
        padding: 2px;
        border-radius: 5px;
    }
    .list-btn{
        background-color: red;
        color: white;
        border: 1px solid #eee;
        padding: 3px;
        float: right;
    }
    .list-info{
        margin-top: 20px;
        overflow: auto;
    }
</style>
<body>
    <h3>轮播图</h3>
    <div class="banner-box">
        <div class="banner">
            <img src="https://static.jyshare.com/images/mix/img_nature_wide.jpg" alt="" class="bannerImg">
            <img src="https://static.jyshare.com/images/mix/img_nature_wide.jpg" alt="" class="bannerImg">
            <img src="https://static.jyshare.com/images/mix/img_nature_wide.jpg" alt="" class="bannerImg">
            <img src="https://static.jyshare.com/images/mix/img_nature_wide.jpg" alt="" class="bannerImg">
        </div>
        <span class="silder pre">《</span>
        <span class="silder next">》</span>
        <div class="bot-list">
            <span class="bot active"></span>
            <span class="bot"></span>
            <span class="bot"></span>
            <span class="bot"></span>
        </div>
    </div>
    <h3>列表</h3>
    <div class="todolist-box">
        <form action="#" style="width: 100%;">
            <input type="text" class="inputtext">
            <button class="submit">添加 </button>
        </form>
        <ul class="list-info">
            <li class="list">
                <span style="float: left;">111111</span>
                <button class="list-btn">delete</button>
            </li>
            <li class="list">
                <span style="float: left;">111111</span>
                <button class="list-btn">delete</button>
            </li>
            <li class="list">
                <span style="float: left;">111111</span>
                <button class="list-btn">delete</button>
            </li>
            <li class="list">
                <span style="float: left;">111111</span>
                <button class="list-btn">delete</button>
            </li>
            <li class="list">
                <span style="float: left;">111111</span>
                <button class="list-btn">delete</button>
            </li>
            <li class="list">
                <span style="float: left;">111111</span>
                <button class="list-btn">delete</button>
            </li>
            
        </ul>
    </div>
</body>
<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        var bannerIndex=0;
        function movebanner(value){
            bannerIndex=value;

            if(bannerIndex>3)bannerIndex=0;
            else if(bannerIndex < 0) bannerIndex=3;

            moveBot(bannerIndex);
            $('.banner').animate({left:-(bannerIndex*600)});
        }
        $('.next').click(function(){
            movebanner(bannerIndex+1);
        })
        $('.pre').click(function(){
            movebanner(bannerIndex-1);
        })
        function moveBot(index){
            $('.bot:eq('+index+')').addClass('active').siblings(this).removeClass('active');
        }
        $('.bot').click(function(){
            bannerIndex=$(this).index();
            movebanner(bannerIndex);
        })
        var timer=setInterval(function(){
            movebanner(bannerIndex+1);
        },2500);
        $('.banner').mouseenter(function(){
            clearInterval(timer)
        })
        $('.banner').mouseleave(function(){
            timer=setInterval(function(){
                movebanner(bannerIndex+1);
            },4000);
        })
    })
</script>
<script>

    $(document).ready(function(){
        $('.submit').click(function(){
            var listHtml='';
            listHtml+="<li class='list'>";
            listHtml+="<span style='float: left;'>"+$('.inputtext').val()+"</span>"
            listHtml+= "<button class='list-btn'>delete</button> </li>";
            $('.list-info').append(listHtml);   
        })
        $(document).on('click','.list-btn',function(){
            var getlistinfo=$(this).parent();
            $('.list:eq('+getlistinfo.index()+')').remove();
        })
        
    })
    
    
</script>
</html>